 <template>
  <div id="advertising-space-list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
            <span class="search-label">广告位:</span>
            <Input v-model="searchObj.adPlaceName" placeholder="请输入" @on-keyup="filteradPlaceName"></Input>
          </Col>
          <Col class="search-item">
            <span class="search-label">渠道:</span>
            <Select v-model="searchObj.channelId" @on-change="doSearch">
              <Option
                v-for="item in channelList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">广告位类型:</span>
            <Select v-model="searchObj.adPlaceType" @on-change="doSearch">
              <Option
                v-for="item in adSpaceTypeList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" type="primary" @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click="resetBtn">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
            <Button v-if="exampleShow" @click="exampleOpen">
              收起筛选
              <Icon type="ios-arrow-down" />
            </Button>
            <Button v-else @click="exampleOpen">
              更多筛选
              <Icon type="ios-arrow-up" />
            </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example" v-show="exampleShow">
        <Row type="flex">
          <Col class="search-item">
            <span class="search-label">创建人:</span>
            <Input v-model="searchObj.creatorName" placeholder="请输入"></Input>
          </Col>
          <Col class="search-item">
            <span class="search-label">创建时间:</span>
            <DatePicker
              format="yyyy-MM-dd HH:mm:ss"
              ref="creationTime"
              :editable="false"
              v-model="dateTimes"
              @on-change="selectTime"
              placement="bottom"
              type="datetimerange"
            ></DatePicker>
          </Col>
        </Row>
      </div>
      <Row type="flex" justify="end" style="margin-right: 12px;">
        <Col class="search-item">
          <Button
            class="search-btn"
            type="primary"
            style="width:90px;"
            @click="addAdvertisingSpace"
            v-if="hasPermission('moms:globalsetting:bannercreate')"
          >添加广告位</Button>
        </Col>
      </Row>
    </div>
    <Table
      stripe
      class="table-list"
      :columns="columns"
      :data="pageObj.advertisingData"
      :loading="loading"
    >
      <!-- 渠道 -->
      <template slot-scope="{ row }" slot="channelId">
        <span>{{ row.channelId===0?"微信":row.channelId===1?"一体机":row.channelId===2?"刷卡器":row.channelId===3?"收银台":row.channelId===4?"口碑":row.channelId===5?"美团":"" }}</span>
      </template>
      <!-- 广告位类型 -->
      <template slot-scope="{ row }" slot="adPlaceType">
        <span>{{ row.adPlaceType===0?"Banner":row.adPlaceType===1?"启动页全屏":row.adPlaceType===2?"通栏":"" }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <i
          class="iconsys icondetail"
          title="查看"
          v-if="hasPermission('moms:globalsetting:bannerdetail')"
          @click="viewDetails(row)"
        ></i>
        <i
          class="iconsys iconedit"
          title="编辑"
          v-if="hasPermission('moms:globalsetting:bannerupdate')"
          @click="advertisingEdit(row)"
        ></i>
        <Poptip confirm :title="'你确定要启用吗？'" transfer width="150" @on-ok="doStatus(row, 0)">
          <i
            class="iconsys iconshangjia"
            title="启用"
            v-if="hasPermission('moms:globalsetting:bannerstatusupdate') && row.adPlaceStatus === 1"
          ></i>
        </Poptip>
        <Poptip confirm :title="'你确定要禁用吗？'" transfer width="150" @on-ok="doStatus(row, 1)">
          <i
            class="iconsys iconxiajia"
            title="禁用"
            v-if="hasPermission('moms:globalsetting:bannerstatusupdate') && row.adPlaceStatus === 0"
          ></i>
        </Poptip>
      </template>
    </Table>
    <Row type="flex" justify="end" style="padding: 20px">
      <Page
        :total="pageObj.advertisingTotal"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.pageSize"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </Row>
  </div>
</template>
<script>
import { getadPlaceList, adplaceStatusChange } from '@/api/advertising/index'
export default {
  name: 'advertising_space_list',
  data () {
    return {
      exampleShow: false,
      loading: false,
      // 渠道
      channelList: [
        { value: '-1', label: '全部' },
        { value: '0', label: '微信' },
        { value: '1', label: '一体机' },
        { value: '2', label: '刷卡器' },
        { value: '3', label: '收银台' },
        { value: '4', label: '口碑' },
        { value: '5', label: '美团' }
      ],
      // 广告位类型
      adSpaceTypeList: [
        { value: '-1', label: '全部' },
        { value: '0', label: 'Banner' },
        { value: '1', label: '启动页全屏' },
        { value: '2', label: '通栏' }
      ],
      columns: [
        {
          title: '广告位ID',
          key: 'adPlaceNo'
        },
        {
          title: '广告位名称',
          key: 'adPlaceName'
        },
        {
          title: '渠道',
          slot: 'channelId'
        },
        {
          title: '广告位类型',
          slot: 'adPlaceType'
        },
        {
          title: '创建人',
          key: 'creatorName'
        },
        {
          title: '创建时间',
          key: 'createAt'
        }
      ],
      dateTimes: [],
      pageObj: {
        advertisingTotal: 0,
        advertisingData: []
      },
      searchObj: {
        adPlaceName: '',
        channelId: '-1',
        adPlaceType: '-1',
        creatorName: '',
        pageIndex: 1,
        pageSize: 10,
        createAtStart: '',
        createAtEnd: ''
      }
    }
  },
  created () {
    this.getData()
    if (
      this.hasPermission([
        'moms:globalsetting:bannerstatusupdate',
        'moms:globalsetting:bannerdetail',
        'moms:globalsetting:bannerupdate'
      ])
    ) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        width: '130'
      })
    }
  },
  watch: {
    $route (newRoute) {
      if (newRoute.name === 'advertising_space_list') {
        this.doSearch()
      }
    }
  },
  methods: {
    filteradPlaceName () {
      this.searchObj.adPlaceName = this.searchObj.adPlaceName.replace(/\s+/g, '')
    },
    // 查询
    doSearch () {
      this.searchObj.pageSize = 10
      this.searchObj.pageIndex = 1
      this.getData()
    },
    // 分页操作
    handlePage (val) {
      this.searchObj.pageIndex = val
      this.getData()
    },
    handlePageSize (val) {
      this.searchObj.pageSize = val
      this.searchObj.pageIndex = 1
      this.getData()
    },
    // 查询广告位列表
    getData () {
      this.loading = true
      getadPlaceList({
        merchantId: this.$store.state.user.merchantId, // 商户id
        channelId: this.searchObj.channelId === '-1' ? '' : this.searchObj.channelId, // 渠道ID
        adPlaceType: this.searchObj.adPlaceType === '-1' ? '' : this.searchObj.adPlaceType, // 广告位类型
        adPlaceName: this.searchObj.adPlaceName, // 广告位名称
        creatorName: this.searchObj.creatorName, // 创建人名称
        createAtStart: this.searchObj.createAtStart, // 创建时间起始
        createAtEnd: this.searchObj.createAtEnd, // 创建时间结束
        offset: this.searchObj.pageSize * (this.searchObj.pageIndex - 1),
        limit: this.searchObj.pageSize
      })
        .then(res => {
          if (res.data.status === 200) {
            if (res.data.totalCount > 0) {
              this.pageObj.advertisingData = res.data.data
              this.pageObj.advertisingTotal = res.data.totalCount
              this.loading = false
            } else {
              this.pageObj = {
                advertisingTotal: 0,
                advertisingData: []
              }
              this.loading = false
            }
          } else {
            this.loading = false
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${this.showError(error)}`)
        })
    },
    // 重置
    resetBtn () {
      this.dateTimes = []
      this.searchObj = {
        adPlaceName: '',
        channelId: '-1',
        adPlaceType: '-1',
        creatorName: '',
        pageIndex: 1,
        pageSize: 10,
        createAtStart: '',
        createAtEnd: ''
      }
      this.getData()
    },
    // 更多筛选
    exampleOpen () {
      this.exampleShow = !this.exampleShow
    },
    // 添加广告位
    addAdvertisingSpace () {
      this.$router.push({ name: 'advertising_space_create' })
    },
    // 查看
    viewDetails (row) {
      this.$router.push({ name: 'advertising_space_detail', params: { id: row.adPlaceId } })
    },
    // 编辑
    advertisingEdit (row) {
      this.$router.push({ name: 'advertising_space_edit', params: { id: row.adPlaceId } })
    },
    // 启用和禁用
    doStatus (row, type) {
      adplaceStatusChange({
        merchantId: this.$store.state.user.merchantId, // 商户id
        adPlaceId: row.adPlaceId,
        adPlaceStatus: type, // 状态 0已启用 1已禁用
        updaterName: this.$store.state.user.userName,
        updater: this.$store.state.user.userId
      })
        .then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            this.$Message.success((type === 1 ? '禁用' : '启用') + '成功！')
            this.getData()
          } else {
            this.$Message.error(`${result.error}`)
          }
        })
        .catch(err => {
          this.$Message.error(`${err}`)
        })
    },
    // 选择创建时间
    selectTime (e) {
      this.searchObj.createAtStart = e[0]
      this.searchObj.createAtEnd = e[1]
    }
  }
}
</script>

<style lang='less'>
#advertising-space-list {
  .search-box {
    .search-item {
      .ivu-date-picker {
        width: 280px;
        .ivu-date-picker-editor {
          width: 280px;
        }
      }
    }
  }
}
</style>
